<template>
  <div>
    <div style="margin-bottom: 16px;">
      <a-button type="primary" @click="$router.push('/novel/add')">添加</a-button>
    </div>
    <a-table :dataSource="list" :columns="columns">
      <span slot="action" slot-scope="text, record">
        <a href="javascript:;" @click="$router.push(`/novel/${record._id}`)">详情</a>
        <a-divider type="vertical" />
        <a href="javascript:;" @click="$router.push(`/novel/edit/${record._id}`)">编辑</a>
       <a-divider type="vertical" />
        <a href="javascript:;" @click="remove(record)">删除</a>
      </span>
    </a-table>
  </div>
</template>

<script>
import { getNovelList, removeNovel } from '@/api'
export default {
  data () {
    return {
      list: [],
      columns: [
        {
          dataIndex: '_id',
          title: 'id'
        },
        {
          dataIndex: 'name',
          title: '名称'
        },
        {
          title: 'Action',
          key: 'action',
          scopedSlots: { customRender: 'action' }
        }
      ]
    }
  },
  created () {
    this.getList()
  },
  methods: {
    getList () {
      return getNovelList().then(res => {
        if (res.code === 200) {
          this.list = res.data
        }
      })
    },
    remove (record) {
      this.$confirm({
        title: '提示',
        content: '确认删除?',
        onOk: () => {
          return removeNovel({ _id: record._id }).then(res => {
            return this.getList()
          })
        }
      })
    }
  }
}
</script>

<style>

</style>